<template>
  <Modal v-model="copyPop" width="23" :closable="false" :mask-closable="false" class-name="vertical-center-modal">
    <div slot="header" class="head-sty">
      <div class="title">{{ $t('personal.invitedUsers') }}</div>
      <Icon type="md-close" class="close-icon" @click="copyPop = false" />
    </div>
    <div class="content-sty">
      <div class="all-link">
        {{ InviteLink }}
      </div>
      <div class="desc">{{ textVal }}</div>
    </div>
    <div slot="footer" class="footer-sty">
      <div class="share-btn" @click="shareBtn">{{ $t('combination.share_link') }}</div>
    </div>
  </Modal>
</template>
<script>
import { mapState } from "vuex";
import { copyInviteLink } from "@/common/common";
export default {
  props: {
    textVal: {
      type: String,
      default: ''
    },
    activityCode: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      copyPop: false,
      InviteLink: ''
    }
  },
  computed: {
    ...mapState({
      config: (state) => state.config.config,
      userInfo: (state) => state.user.userInfo,
    }),
  },
  methods: {
    open() {
      if (this.activityCode) {
        if (localStorage.getItem('USER_TOKEN')) {
          let link = `${this.config.webDomain}/register?inviteCode=${this.userInfo.inviteCode}&activityCode=${this.activityCode}`;
          this.InviteLink = link;
        } else {
          this.$router.push('/login')
        }
        this.copyPop = true;
      } else {
        this.InviteLink = copyInviteLink();
        if (this.InviteLink) {
          this.copyPop = true;
        }
      }
    },
    onCopy(info) {
      // 复制
      let _this = this;
      this.$copyText(info).then(function () {
        _this.$Message.success(_this.$t('public.copySuccess'));
      }, function () {
        _this.$Message.error(_this.$t('public.copyFail'));
      })
      this.copyPop = false;
    },
    shareBtn() {
      if (this.activityCode) {
        this.onCopy(this.InviteLink);
      } else {
        this.onCopy(copyInviteLink());
      }
    }
  }
}
</script>
<style lang="less" scoped>
:deep(.ivu-modal-header) {
  border: none;
  padding: 32px 32px;
}

:deep(.ivu-modal-body) {
  padding: 0 32px;
}

:deep(.ivu-modal-footer) {
  border: none;
  padding: 32px;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .head-sty {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 24px;
      color: #1E1714;
      line-height: 28px;
    }

    .close-icon {
      color: #1E1714;
      font-size: 32px;
      font-weight: 600;
      cursor: pointer;
    }
  }

  .content-sty {
    .link {
      width: 376px;
      white-space: nowrap;
      /* 规定文本不进行换行 */
      overflow: hidden;
      /* 超出部分隐藏 */
      text-overflow: ellipsis;
      /* 超出部分显示省略号 */
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 20px;
      color: #1E1714;
      line-height: 23px;
      text-align: justify;
    }

    .all-link {
      width: 376px;
      word-break: break-all;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 20px;
      color: #1E1714;
      line-height: 23px;
    }

    .desc {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 20px;
      color: #767B93;
      line-height: 23px;
      margin-top: 20px;
      text-align: justify;
    }
  }

  .footer-sty {
    display: flex;
    justify-content: end;

    .share-btn {
      width: 174px;
      height: 56px;
      background: #1E1714;
      border-radius: 8px 8px 8px 8px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 20px;
      color: #FFFFFF;
      line-height: 23px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
}
</style>
